<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
        <em>财务人员姓名：</em>
        <el-input v-model="searchBox.name" size="small" style="width:250px" placeholder="财务人员姓名"></el-input>
        </div>
        <div class="searchbox">
        <el-button type="primary" @click="getList" size="mini">搜索</el-button>
        </div>
      </div>
      <div class="rightBox">
         <el-button type="primary" size="mini" @click="addNew">新增财务人员</el-button>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 列表内容↓ -->
    <div class="contentBox">
      <el-table :data="Finance" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="roleName" label="角色"></el-table-column>
        <el-table-column fixed="right" width="120" label="操作">
          <template slot-scope="scope">
            <el-button  @click="drop(scope.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    </div>

  <!-- 弹层内容↓ -->
   <el-dialog title="添加校区财务人员" :visible.sync="dialogFormVisible" width="40%">
    <em>财务人员姓名：</em><el-input v-model="searchBox.name1" size="small" style="width:250px; margin:0 10px 0 0;" placeholder="财务人员姓名"></el-input>
     <el-table :data="peolist.filter(item=>item.userName.indexOf(searchBox.name1)>-1)" :header-cell-style="headClass" border stripe style="width: 100%" height="400px">
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.roleId=='4'||scope.row.roleId=='2'"  @click="setFinancePeo(scope.row)" type="primary" size="mini" plain>设为财务人员</el-button>
          </template>
        </el-table-column>
    </el-table>
   </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ccc:'权限管理',
      dialogFormVisible:false,
      searchBox:{
        name:'',
        name1:''
      },
      Finance:[],
      peolist:[],

    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 获取财务权限列表
    getList:function(){
      this.$api.systemSetup.GetPermissionList(this.searchBox.name).then(res=>{
        //console.log("财务权限人员列表",res);
        this.Finance = res.data.result;
      })
    },
    // 获取人员列表
    getPeoList:function(){
      this.$api.systemSetup.GetPeoList().then(res=>{
        //console.log("新增权限全部人员列表",res);
        this.peolist = res.data.result;
      })
    },
    // 新增财务人员
    addNew:function(){
      this.dialogFormVisible = true;
      this.getPeoList();
    },
    // 删除财务人员
    drop:function(obg){
      console.log(obg)
      this.$confirm(`确定删除当前财务人员(${obg.userName})？`,'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$api.systemSetup.SetFinancePeo('left',obg.userId).then(res=>{
        //console.log("删除权限人员",res);
        if(res.data.status=='SUCCESS'){
            this.$message({
                message:`删除权限人员(${obg.userName})成功!`,
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
      })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    // 设置财务人员
    setFinancePeo:function(obg){
      this.$api.systemSetup.SetFinancePeo('right',obg.userId).then(res=>{
        //console.log("新增权限人员",res);
        if(res.data.status=='SUCCESS'){
            this.$message({
                message:'新增权限人员成功!',
                type: 'success'
            })
            this.dialogFormVisible = false;
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
      })
    }
  }
}
</script>
